<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜单管理</title>
    <script src="../commonCss.js"></script>
    <script src="../commonJs.js"></script>
    <link rel="stylesheet" href="../../css/treetable/jquery.treetable.css" />
    <link rel="stylesheet" href="../../css/treetable/jquery.treetable.theme.default.css" />
    <link rel="stylesheet" href="../../css/common.css">

    <script type="text/javascript" src="../../js/my/ztree-menu.js"></script>
    <script src="../../js/libs/jquery.treetable.js"></script>
    <script type="text/javascript" src="../../js/common.js"></script>
    <script type="text/javascript" src="../../layui/layui.js"></script>
</head>

<body class="hold-transition skin-blue sidebar-mini">
    <section class="content-header">
        <div class="ctc_title">菜单管理</div>
        <div class="down_line"></div>
    </section>

    <!-- Main content -->
    <section class="content" >
        <div class="row">
            <div class="col-xs-12">
                <div style="float: right ">
                    <div class="form-group" style="margin-right: 20px;">
                        <button type="button" onclick="addMenu()" class="btn btn-block btn-primary">新增菜单</button>
                    </div>
                </div>

                <div class="widget-body no-padding">
                    <table id="dt-table" class="table table-striped table-bordered table-hover" style="width:100%">
                        <tr>
                            <th width="5%">菜单ID</th>
                            <th width="20%">菜单名称</th>
                            <th width="25%" colspan="2">链接</th>
                            <th width="5%">排序</th>
                            <th width="5%">操作</th>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </section>

    <!-- 【编辑】弹出窗内容 -->
    <div class="modal" id="editMenuPanel" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">×</span>
                        <span class="sr-only">Close</span>
                    </button>
                    <h4 class="modal-title" align="center" id="mopTitle"></h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" onsubmit="return false" id="form">
                        <fieldset  style="margin-top: 1%;">
                            <input type="hidden" id="id" name="id">
                            <div class="form-group">
                                <label class="col-md-2 control-label">上级菜单</label>
                                <div class="col-md-10">
                                    <select id="parentId" name="parentId" class="form-control input-sm" onclick="checkParent()"></select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-2 control-label" style="color: red">名称</label>
                                <div class="col-md-10">
                                    <input class="form-control" placeholder="名称" type="text" name="name" id="name"
                                           data-bv-notempty="true"
                                           data-bv-notempty-message="名称不能为空">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-2 control-label">样式</label>
                                <div class="col-md-10">
                                    <button onclick="selectCss()" class="btn btn-primary">选择</button>
                                    <input type="hidden"  name="icon" id="icon" /><i id="cssImg" class="fa"></i>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-2 control-label">链接</label>
                                <div class="col-md-10">
                                	<label class="text-info text-sm">*一级菜单不填写链接</label>
                                    <select class="form-control input-sm" name="host" id="host">
                                        <option value="">默认服务器</option>
                                    </select>
                                    <input class="form-control" placeholder="路径" name="url" id="url"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-2 control-label">类型</label>
                                <div class="col-md-10">
                                    <select name="type" class="form-control input-sm" id="type">
                                        <option value="1">菜单</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-2 control-label">排序</label>
                                <div class="col-md-10">
                                    <input class="form-control" placeholder="排序" name="sort" id="sort" type="number"
                                           data-bv-notempty="true"
                                           data-bv-notempty-message="排序 不能为空">
                                </div>
                            </div>

                        </fieldset>
                    </form>
                </div>
                <div class="modal-footer" style="text-align: center">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="confirmEditConfig();">确定</button>
                </div>
            </div>
        </div>
    </div>

</body>
<script>
    $(document).ready(function() {
        layui.use('layer', function(){
            var layer = layui.layer;
        });
        //加载数据
        initMenuList();
        initHostList();
    });
    function initHostList() {
        $("#host").empty();
        $.ajax({
            type:"POST",
            url:"/sysmenu/getHostList",
            async : false,//默认就是true
            dataType:"json",
            success : function(res) {
                var data = res.data.hostList;
                for (var i = 0;i<data.length;i++){
                    $("#host").append("<option value = '"+data[i].host+"'>"+data[i].name+"</option>");
                }
            }
        });
    }
    // 加载数据
    function initMenuList(){
        $.ajax({
            type : 'get',
            url : '/sysmenu/menuListAll',
            contentType: "application/json; charset=utf-8",
            async:false,
            success : function(data) {
                var length = data.length;
                for(var i=0; i<length; i++){
                    var d = data[i];
                    var tr = "<tr data-tt-id='" + d['id'] + "' data-tt-parent-id='" + d['parentId'] + "'>";
                    var td1 = "<td>" + d['id'] +"</td>";
                    tr += td1;
                    var name = "<td>" + d['name'] +"</td>";
                    tr += name;
                    var host = "";
                    if(d['host'] != null){
                        host = d['host'];
                    }
                    var tdHost = "<td width='10%'>" + host +"</td>";
                    tr += tdHost;
                    var href = "";
                    if(d['url'] != null){
                        href = d['url'];
                    }
                    var td2 = "<td>" + href +"</td>";
                    tr += td2;

                    var sort = d['sort'];
                    if(sort == 0){
                        sort = "";
                    }

                    var td3 = "<td>" + sort +"</td>";
                    tr += td3;

                    var id = d['id'];
                    var edit = "<a href='#' title='编辑' onclick=editMenu('" + id +"');><i class='\tglyphicon glyphicon-pencil'></i></a>&nbsp;&nbsp;&nbsp;";
                    var del = "<a href='#' title='删除' onclick=deleteMenu('" + id +"');><i class='glyphicon glyphicon-trash'></i></a>";
                    tr += "<td>"+edit + del+"</td>";
                    tr += "</tr>"
                    $("#dt-table").append(tr);
                }
            }
        });
        $("#dt-table").treetable(option);
    }
    //加载树结构
    var option = {
        expandable : true,
        clickableNodeNames : true,
        onNodeExpand : function() {
            var d = this;
            console.log(d['id']);
            console.log(d['parentId']);
        },
        onNodeCollapse : function() {
            var d = this;
            console.log(d['id'] + "Collapse");
            console.log(d['parentId'] + "Collapse");
        }

    };

    //打开编辑页面
    function editMenu(id) {
        $("#parentId").empty();
        initParentMenuSelect();
        $.ajax({
            type:"POST",
            url:"/sysmenu/getMenuById",
            async : true,//默认就是true
            dataType:"json",
            data:{id : id},
            success : function(data) {
                $("#id").val(data.id);
                $("#parentId").val(data.parentId);
                $("#name").val(data.name);
                var css = data.icon;
                $("#icon").val(icon);
                $("#host").val(data.host);
                $("#url").val(data.url);
                $("#type").val(data.type);
                $("#sort").val(data.sort);
                if($("#parentId").val() == 0){
                    $("#host").attr("readonly","readonly");
                    $("#url").attr("readonly","readonly");
                }

                if(css != ""){
                    $("#cssImg").addClass("fa");
                    $("#cssImg").addClass(css);
                }
            }
        });
        $("#mopTitle").text("编辑菜单");
        $("#editMenuPanel").modal("toggle");//弹窗打开
    }

    //校验首级菜单
    function checkParent() {
        if($("#parentId").val() == 0){
            $("#host").val("");
            $("#host").attr("readonly","readonly");
            $("#url").val("");
            $("#url").attr("readonly","readonly");
        }else{
            $("#host").removeAttr("readonly");
            $("#url").removeAttr("readonly");
        }
    }

    //确认提交数据
    function confirmEditConfig() {
        //数据校验
        var id = $("#id").val();
        var url = "";
        if(id != ""){
            if($("#parentId").val() == id){
                layer.msg("父级菜单不能是自己");
                return;
            }
            url = "/sysmenu/updateMenu";
        }else{
            url = "/sysmenu/saveMenu";
        }

        if($("#name").val() == ""){
            layer.msg("菜单名称为必填项");
            return ;
        }
        $("#icon").val($("#cssImg").attr("class"));
        var formdata = $("#form").serializeObject();
        $.ajax({
        	type : 'post',
        	url : url,
            async : true,//默认就是true
            dataType:"json",
        	contentType: "application/json; charset=utf-8",
        	data : JSON.stringify(formdata),
        	success : function(data) {
                $("#editMenuPanel").modal("toggle");//弹窗关闭
                location.reload();
                layer.msg(data.msg,{shift: -1, time: 5000});
        	}
        });
    }

    //新增菜单
    function addMenu() {
        $("#parentId").empty();
        initParentMenuSelect();
        $("#id").val("");
        $("#parentId").val("0");
        $("#name").val("");
        $("#icon").val("");
        $("#host").val("");
        $("#url").val("");
        $("#type").val(1);
        $("#sort").val(1);
        $("#mopTitle").text("新增菜单");
        $("#editMenuPanel").modal("toggle");//弹窗打开
    }

    //选择菜单图标
    function selectCss(){
        layer.open({
            type: 2,
            title: "样式",
            area: ['800px', '400px'],
            maxmin: true,
            shadeClose: true,
            content: ['icon.html']
        });
    }

    //删除菜单
    function deleteMenu(id){
        if(confirm("确定要删除吗？")){
            $.ajax({
                type:"POST",
                url:"/sysmenu/deleteMenu",
                async : true,//默认就是true
                dataType:"json",
                data:{id : id},
                success : function(data) {
                    if(data.status == 1){
                        layer.msg(data.msg);
                        location.reload();
                    }else{
                        layer.msg(data.msg);
                    }

                }
            });
        }
    }
</script>
</html>